{##																#}
{## Developed for the University of Nottingham G52GRP module 	#}
{##																#}
{## Written by:	Marcus Whybrow (mxw18u) 						#}
{## Group: 		gp09-drm 										#}
{##																#}

{% extends "libraries/library_detail.html" %}

{% load truncate_filters %}

{% block title %}
{% if bookshelf %}
	{{ bookshelf.name }} | {{ block.super }}
{% else %}
	{{ unsorted_bin.value }} | {{ block.super }}
{% endif %}
{% endblock %}

{% block page_title %}libraries-bookshelf-detail{% endblock %}

{% block breadcrumbs %}
	{{ block.super }}
	{% if bookshelf %}
		<li id="bc-libraries-bookshelf-detail" class="bookshelf"><a href="{% url bookshelf_detail library.slug, bookshelf.slug %}">{{ bookshelf.name|truncatechars:40 }}</a></li>
	{% else %}
		<li id="bc-libraries-bookshelf-detail" class="bookshelf"><a href="{% url library_detail library.slug %}{{ unsorted_bin.slug }}/">{{ unsorted_bin.value|truncatechars:40 }}</a></li>
	{% endif %}
{% endblock %}

{% block head %}
<link rel="stylesheet" href="/media/js/jqtransform/jqtransform.css" />
<script type="text/javascript" src="/media/js/jquery.jeditable.mini.js"></script>
<script type="text/javascript" src="/media/js/jquery.blockUI.js"></script>
<script type="text/javascript" src="/media/js/utils.js"></script>
<script type="text/javascript">
	$(function() {
		
		// Close events for overlays
		
		$('#accept-overlay input.overlay-ok').click(function() {
			 $.unblockUI();
			 return false;
		});
		
		// Editing Details
		
		$("div.editable .detail").editable(function(value, settings) {
			var detail = $(this);
			if (detail.attr('id') == 'name') {
				postData = {name: value, pk: '{{ bookshelf.pk }}'}
			} else if (detail.attr('id') == 'description') {
				postData = {description: value, pk: '{{ bookshelf.pk }}'}
			}
			
			var result = '';
			
			connection('{% url api_save_collection %}', postData, function(data) {
				if (detail.attr('id') == 'name') {
					result = data.collection.name;
					window.location = data.collection.url;
					
				} else if (detail.attr('id') == 'description') {
					result = data.collection.description;
				}
			}, undefined, undefined, false);
						
			return result;
		},
		{ 
			cssclass: 'editing',
			submit: 'save',
			cancel: 'cancel',
			width: '448px'
		});
		
		// Adding Bookshelves
		
		$("form#add-book-form").submit(function() {
			
			var form = $(this);
			var formData = form.serialize();
			
			form.find(':input').attr('disabled', 'disabled');
			
			connection('{% url api_get_book_detail %}', formData, function(data) {
				var book = data.book;
				var title = book.title;
				var author = book.author;
				var pk = book.pk;
				var url = book.url;
				
				var truncateLength = 40;
			
				if (title.length > truncateLength) {
					title = name.substring(0, truncateLength) + '...';
				}
				
				var listItem = '<li id="' + pk + '" style="display: none">' +
				'<img src="/media/images/events/book-brown.png" width="16" height="16" title="Book" />' +
				'<a class="item-title img-title" href="' + url + '">' + title + ' →</a>' +
				'<p class="item-subtitle">by ' + author + '</p>' +
				'<button class="confirm">confirm</button><button class="cancel">cancel</button>' +
				'</li>';
				
				$("ul#book-list").append(listItem);
				
				var item = $('li#' + book.pk);
				var book_pk = item.attr('id');
				var collection_pk = '{% if bookshelf %}{{ bookshelf.pk }}{% else %}{{ library.pk }}{% endif %}';
				
				item.find('button.confirm').click(function() {
					
					connection('{% url api_save_profile %}', { collection_pk: collection_pk, book_pk: book_pk }, function(data) {
						item.attr('id', data.profile.pk);
						var title = item.find('a.item-title');
						title.attr('href', data.profile.url).removeClass('deleted');
						item.find('button.cancel').fadeOut('200', function() {
							$(this).remove();
						});
						item.find('button.confirm').fadeOut('200', function() {
							$(this).remove();
							item.append('<button class="delete">delete</button>');
							item.find('button.delete').click(book_click_delete);
							item.hover(book_hover_over, book_hover_out);
						});
					});
				});
				
				item.find('button.cancel').click(function() {
					item.slideUp('200', function() {
						$(this).remove();
					});
				});
				
				$('#' + book.pk).slideDown('200');
			}, function() {
			
				form.find(':input').attr('disabled', '');
				form.find(':input[name="name"]').val('');
			}, 'GET');
			
			form.find(':input[name="isbn"]').val('').focus();
			return false;
		});
		
		// Books List
		
		function book_hover_over() {
			$(this).find('button.delete, button.really').css('display', 'block');
		}
		
		function book_hover_out() {
			$(this).find('button.delete').css('display', 'none');
			$(this).find('button.really').remove();
		}
		
		function book_click_delete() {
			var book_row = $(this).parent();
			var book_pk = book_row.attr("id");
			
			if (book_row.find('button.really').length == 0) {
				
				book_row.append('<button class="really">really</button>');
			
				var really = book_row.find('button.really');
				
				really.css('display', 'block');
				
				really.click(function() {
					$.ajax({
						url: '{% url api_delete_profile %}',
						data: { pk: book_pk },
						dataType: 'json',
						type: 'POST',
						success: function(data) {
							if (data.meta.success == true) {
								book_row.slideUp('200', function() {
									$(this).remove();
								});
								$.growlUI('Book Deleted', 'Your book was deleted successfully');
							} else if(data.meta.success == false) {
								
								$('#accept-overlay').find('h1.target').text('Error Deleting Book');
								$('#accept-overlay').find('p.target').text(data.meta.error);
								$.blockUI({ 
									fadeIn:  200,
									fadeOut: 200,
									css: { 
										border: 'none',
										opacity: 1,
										'-webkit-border-radius': '10px',
										'-moz-border-radius': '10px',
										backgroundColor: 'none'
							        },
						        	message: $('#accept-overlay')
						        });
							}
						},
						error: function() {
							$('#accept-overlay').find('h1.target').text('Something Went Wrong!');
							$('#accept-overlay').find('p.target').text('This is completely our fault, something has gone wrong on our end. We are probably trying to fix it, so try again in a few seconds.');
							$.blockUI({ 
								fadeIn:  200,
								fadeOut: 200,
								css: { 
									border: 'none',
									opacity: 1,
									'-webkit-border-radius': '10px',
									'-moz-border-radius': '10px',
									backgroundColor: 'none'
						        },
					        	message: $('#accept-overlay')
					        });
						}
					});
				});
				
			}
		}
		
		$("ul#book-list li").append('<button class="delete">delete</button>');
			  
		$("ul#book-list li").hover(book_hover_over, book_hover_out);
			  
		$("ul#book-list li button.delete").click(book_click_delete);
		
	});
</script>
{% endblock %}

{% block content %}
	<div class="section">
		<div class="inner">
			<div class="container clearfix">
				<div class="two-thirds alpha">
					{% if bookshelf %}
						<div class="editable">
							<h2 id="name" class="h2-detail detail">{{ bookshelf.name }}</h2>
						</div>
						<div class="editable">
							<p id="description" class="p-detail detail">{{ bookshelf.description|default:"No Description (Click here to add one)" }}</p>
						</div>
					{% else %}
						<h2>{{ unsorted_bin.value }}</h2>
						<p>{{ unsorted_bin_description.value }}</p>
					{% endif %}
				</div> <!-- / .two-thirds.alpha -->
				<div class="third omega">
					
				</div> <!-- / .third.omega -->
			</div> <!-- / .container.clearfix -->
		</div> <!-- / .inner -->
	</div> <!-- / .section -->
	
	<div class="section">
		<div class="inner">
			<div class="container clearfix">
				<div class="two-thirds alpha">
					<div class="rounded-wrapper">
					{% if bookshelf %}
						<h3>Books</h3>
						<ul id="book-list" class="double-title item-list">
							{% for book in bookshelf.books.all %}
								<li id="{{ book.pk }}">
									<img src="/media/images/events/book-brown.png" width="16" height="16" title="Book" />
									<a class="item-title img-title" href="{{ book.get_absolute_url }}">{{ book.title }} →</a>
									<p class="item-subtitle">by {{ book.author }}</p>
								</li>
							{% endfor %}
						</ul>
						{% if bookshelf.books.all %}
						{% else %}
							<p class="center">There are no books in this bookshelf.</p>
						{% endif %}
						<h3>Add a Book Here</h3>
						<form id="add-book-form" action="" method="post">
							<input type="text" name="isbn" id="id_isbn" />
							<input type="submit" value="Add" />
						</form>	
					{% else %}
						<h3>Unsorted Books</h3>
						<ul id="book-list" class="double-title item-list">
							{% for book in library.books.all %}
								<li id="{{ book.pk }}">
									<img src="/media/images/events/book-brown.png" width="16" height="16" title="Book" />
									<a class="item-title img-title" href="{{ book.get_absolute_url }}">{{ book.title }} →</a>
									<p class="item-subtitle">by {{ book.author }}</p>
								</li>
							{% endfor %}
						</ul>
						{% if library.books.all %}
						{% else %}
							<p class="center">There are no books in this {{ unsorted_bin.value|lower }}.</p>
						{% endif %}
						<h3>Add a Book Here</h3>
						<form id="add-book-form" action="" method="post">
							<input type="hidden" name="collection_pk" id="collection_pk" value="{{ bookshelf.pk }}" />
							<input type="text" name="isbn" id="id_isbn" />
							<input type="submit" value="Add" />
						</form>
					{% endif %}
					</div>
					
				</div>
				<div class="third omega">
					<h3>Overview</h3>
					<p>You can add books via 2 methods: Enter an ISBN number right here over on the left, or add books in batch using the link at the bottom of this page.</p>
					
					<h3>Deleting</h3>
					<p>You may delete a book from this bookshelf by placing your mouse over the row. A delete button will apear on the right hand side.</p>
					
					<h3>Moving</h3>
					<p>If you wish to move a book to a different location, view the book you wish to move, and click the "Move This Book" button in right column.</p>
					
					<h3>Adding</h3>
					<p>Enter ISBN numbers to left and click add.</p>
				</div>
			</div>
		</div>
	</div>
	
	<div class="section">
		<div class="inner">
			<p class="center"><a href="{% url add_books %}?c={{ bookshelf.pk }}">Add Books In Batch To This Bookshelf</a></p>
		</div>
	</div>
	
	<div id="accept-overlay" class="overlay">
		<div class="overlay-header">
			<h1 class="target"></h1>
		</div>
		<div class="overlay-body">
			<p class="target"></p>
		</div>
		<div class="overlay-footer clearfix">
			<input type="button" class="overlay-ok overlay-button" value="Alright" /> 
		</div>
	</div>
{% endblock %}